<template>
	<view class="box" style="background-color: #f2f2f2">
		<view class="box_top">
			<!-- <u-swiper :list="imgList" ></u-swiper> -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in imgList" :key="item">
				<image mode="scaleToFill" :src=item class="swiper-image" > </image>
			</swiper-item>
			</swiper>
		</view>
		<view class="box_main">
			<view class="box_book_top">
				<view>
					{{ bookMessage.bookName }}
				</view>
				<view>{{ bookMessage.bookAuthor }}</view>
				<view style="margin-top: 20px">
					<uni-tag :inverted="true" text="科学" v-if="bookMessage.bookType == '0'" type="primary" />
					<uni-tag :inverted="true" text="文学" v-if="bookMessage.bookType == '1'" type="primary" />
					<uni-tag :inverted="true" text="神秘" v-if="bookMessage.bookType == '2'" type="primary" />
				</view>
			</view>
			<view class="box_book_introduce">
				<view style="font-size: 18px; font-weight: 600">书籍简介</view>
				<view>{{ bookMessage.introduction }}</view>
			</view>
			<view class="box_book_status" style="">
				<view style="font-size: 18px; font-weight: 600">书籍状况</view>
				<view>{{ bookMessage.bookStatus }}</view>
			</view>
			<view class="box_book_uploader">
				<view>上传人姓名：{{ bookMessage.uploaderName }}</view>
				<view>上传人班级：{{ bookMessage.uploaderClass }}</view>
				<view>上传时间：{{ bookMessage.uploadTime }}</view>
			</view>
			<view class="box_book_lessee" v-if="bookMessage.isLend == 1">
				<view>借用人姓名：{{ bookMessage.leaseName }}</view>
				<view>借用人班级：{{ bookMessage.leaseClass }}</view>
				<view>借走日期：{{ bookMessage.beginTime }}</view>
				<view>借用时间：{{ bookMessage.leaseTime }}天</view>
			</view>
			<view style="margin-top: 20px">
				<button type="primary" v-if="bookMessage.isLend == 0" @click="setMessage()">点击借书</button>
				<button type="primary" disabled="true" v-if="bookMessage.isLend == 1">该书已被其他人借走</button>
			</view>
			<view>
				<u-popup mode="center" v-model="show" width="auto" height="auto">
					<view style="margin:30px">
						<u-form :model="form" ref="uForm">
							<span style="font-size: 15px;color:#515a6e">填写借书人信息</span>
							<u-form-item label="姓名"><u-input v-model="form.leaseName" /></u-form-item>
							<u-form-item label="班级"><u-input v-model="form.leaseClass" /></u-form-item>
							<u-form-item label="期限">
								<u-radio-group v-model="form.leaseTime">
									<u-radio v-for="(item, index) in timeList" :key="index" :name="item.value">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-button @click="submit()">提交</u-button>
						</u-form>
					</view>
				</u-popup>
				<u-toast ref="uToast" position="bottom" />
			</view>
			<u-modal v-model="loginShow" @confirm="confirm" :content="content" @cancel="loginShow = false"
				show-cancel-button="true" mask-close-able="true"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		chooseBook,
		lendBook,
		getBookImg
	} from '@/utils/book.js';
	import {
		getUserMessage
	} from '@/utils/user.js';
	import BASE_URL from '@/utils/env.js'
	export default {
		data() {
			return {
				//轮播图片
				imgList: [],
				modeIndex: 2,
				styleIndex: -1,
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				swiperDotIndex: 0,
				bookMessage: [],
				//借书人信息
				form: {
					id: '',
					leaseId: '',
					leaseName: '',
					leaseClass: '',
					leaseTime: '',
					beginTime: '',
					bookName: '',
					bookAuthor: '',
				},
				//借书弹窗
				show: false,
				//登录弹窗
				loginShow: false,
				//登录弹窗内容
				content: '',
				//图片数量
				imageNum: 3,
				timeList: [{
					name: '一周(7天)',
					value: 7
				}, {
					name: '两周(14天)',
					value: 14
				}, {
					name: '一月(30天)',
					value: 30
				}],
				//已借图书数量
				lendBookNum: '',
			};
		},
		methods: {
			getList() {
				let params = {
					id: this.form.id
				};
				chooseBook(params).then((res) => {
					if (res.code == 200) {
						this.bookMessage = res.data[0];
						this.bookMessage.uploadTime = res.data[0].uploadTime.split('T')[0]
						if(this.bookMessage.beginTime){
							this.bookMessage.beginTime = res.data[0].beginTime.split('T')[0]
						}
						this.form.bookAuthor = this.bookMessage.bookAuthor
						this.form.bookName = this.bookMessage.bookName
						let imgIdList = this.bookMessage.bookImage.toString().split(',')
						const getImg = async _ =>{
								imgIdList.forEach( async item =>{
								this.abcUrl = await this.getBookImgList(item)
								this.imgList = []
								this.imgList.push(BASE_URL+this.abcUrl.data[0].bookurl)
							})
						}
						getImg()
					}
				});
			},
			//获取封面图片
			getBookImgList(data){
				let params = {
					id:data
				}
				return getBookImg(params)
			},
			clickItem(e) {
				this.swiperDotIndex = e;
			},
			change(e) {
				this.current = e.detail.current;
			},
			//生成时间格式
			getDate(n) {
				n = new Date(n)
				return n.toLocaleDateString().replace(/\//g, "-") + " " + n.toTimeString().substr(0, 8);
			},
			//提交借书表单
			submit() {
				//查看是否超出借书上限
				if (this.lendBookNum >= 3) {
					this.content = '已经借了多本书了,看书要慢慢来哟!'
					this.loginShow = true
					return
				}
				//获取时间戳
				this.form.beginTime = Date.now()
				//时间戳转正式时间
				this.form.beginTime = this.getDate(this.form.beginTime)
				let params = {
					...this.form
				}
				lendBook(params).then(res => {
					if (res.code == 200) {
						this.show = false
						this.getList()
						this.$refs.uToast.show({
							title: '借书成功',
							type: 'success',
							//可跳转
							// url: '/pages/user/index'
						})
					}
				})
			},
			//点击借书
			setMessage() {
				const userMessage = wx.getStorageSync('userMessage');
				console.log(userMessage)
				if (userMessage == '') {
					this.content = '未查询到登录信息,是否跳转到登录页面'
					this.loginShow = true
					return
				} else {
					this.show = true
					let params = {
						id: userMessage.id
					}
					getUserMessage(params).then(res => {
						if (res.code == 200) {
							this.form.leaseId = res.data[0].id
							this.form.leaseName = res.data[0].name
							this.form.leaseClass = res.data[0].class
							this.lendBookNum = res.data[0].lendBookNum
						}
					})
				}
			},
			//跳转到登录页面
			confirm() {
				if (this.content == '未查询到登录信息,是否跳转到登录页面') {
					wx.switchTab({
						url: '/pages/tabBar/user/index'
					})
				} else {
					this.loginShow = false
				}
			},
			//重置
			reset() {
				this.form = {
					id: '',
					leaseId: '',
					leaseName: '',
					leaseClass: '',
					leaseTime: '',
					beginTime: '',
					bookName: '',
					bookAuthor: ''
				}
			}
		},
		onLoad(e) {
			this.form.id = JSON.parse(decodeURIComponent(e.key))
			this.getList()
		},
	};
</script>

<style lang="scss">
	.box_top {
		padding: 20px 20px 0px 20px;
	}

	.swiper-box {
		height: 200px;
	}
	swpier{
		width: 100%;
		height: calc(100vw*9/16);
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}
	 .uni-margin-wrap {
	 	
		height:100%;
	 	margin:0 0upx;
	 }
	 .swiper {
	 	height: 400upx;
		text-align: center;
	 }
	 .swiper-item {
	 	display: block;
	    line-height: 400upx;
	 	text-align: center;
	 }
	 .swiper-image{  
	     width:50%;  
	     height:400upx; 
	 } 
	.box_main {
		display: flex;
		flex-direction: column;
		padding: 20px
	}

	.box_book_top {
		background-color: white;
		border-radius: 10px;
		padding: 20px
	}

	.box_book_top view:nth-child(1) {
		font-family: Source Han Sans SC;
		font-weight: 800;
		font-size: 30px;
		color: black;
		line-height: 40px;
		margin-bottom: 20px
	}

	.box_book_top view:nth-child(2) {
		font-family: Source Han Sans SC;
		font-size: 26px;
		color: #636363;
		line-height: 20px
	}

	.box_book_introduce {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		margin-top: 20px
	}

	.box_book_status {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		margin-top: 20px
	}

	.box_book_uploader {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		margin-top: 20px
	}

	.box_book_lessee {
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		margin-top: 20px
	}
</style>